import React, { Component } from 'react';
import styled from 'styled-components';
import ReactToPrint from 'react-to-print';

import { connect } from 'dva';

import { Button } from 'antd';

import { ColTable } from '@/components/Ceil/'

import { REPORT_MSG } from '../enum';
import { Ceil } from '../components/Details';
import MsgCeil from '../components/MsgTable';

interface IProps {
  dispatch?: Function;
  details?: any;
  id: string;
}

const ColCeilC = styled.table`
  width: 100%;
  td, th {
    border: 1px solid var(--ceil-border);
    padding: 5px 16px;
    height: 55px;
  }
  th {
    color: var(--ceil-header);
    font-size: 14px;
    font-weight: 500;
  }
  tr {
    th {
      background: #FAFAFA;
      font-weight:500;
      color:rgba(68,68,68,1);
      font-size:16px;
    }
    td {
      font-size:14px;
      font-weight:500;
      color:rgba(102,102,102,1);
    }
  }
  td {
    color: var(--ceil-content);
    font-size: 14px;
    font-weight: 500;
  }

  thead th {
    background: #FAFAFA;
    font-weight:500;
    color: rgba(68,68,68,1);
    font-size:16px;
  }
  @media print {
    tr {
      background: #fff;
      font-family: 'STSong', 'SimSun';
    }
    thead tr th {
      border: 1px solid var(--ceil-border);
      padding: 5px 16px;
      color: #000000;
      font-family: 'STSong', 'SimSun';
      background: #fff;
    }
  }
`

const Foot = styled.tr`
  td {
    font-weight:500;
    font-size:14px;
    color:rgba(102,102,102,1);
  }
`

@connect(({ task_month }) => ({
  details: task_month.reportDetails || {},
}))
class ComponentToPrint extends Component<IProps, any> {
  componentDidMount() {
    const { dispatch, id } = this.props;
    dispatch({ type: 'task_month/queryReportDetails', payload: id })
  }

  render() {

    const { details } = this.props;
    const { stat } = details;

    const num = (Array.isArray(stat) ? stat : []).length;
    const ept = num - Math.floor(num / 2) * 2;
    const ans = [];

    [...Array(ept).keys()].forEach(v => {
      stat.push({
        name: '',
        total: '',
        rate: '',
      })
    })

    for (let i = 0; i < num; i += 2) {
      let tp = 0;
      let tpAns = []
      while (2 > tp) {
        tpAns.push(stat[i + tp])
        tp++;
      }
      ans.push(tpAns)
    }

    const tmp = details && REPORT_MSG.map(v => {
      const keys = v.key.split('.')
      return {
        title: v.value,
        value: details[keys[0]] ? details[keys[0]][keys[1]] : '/' || '/'
      }
    })

    tmp.push({
      title: '检查人员',
      value: details && Array.isArray(details.users) ? details.users.map(v => v.name).join(', ') : '/'
    })

    tmp.push({
      title: '检查日期',
      value: `${details.task && details.task.startTime ? details.task.startTime.slice(0, 10) : ''} 
      —— ${details.task && details.task.endTime ? details.task.endTime.slice(0, 10) : ''}`
    })

    return (
      <section style={{ padding: '20px' }}>
        <h1 style={{
          fontSize: '20px',
          textAlign: 'center',
          lineHeight: '50px',
        }}>单位自我维保检查</h1>
        {
          Array.isArray(tmp) && tmp[0].value && <ColTable
            data={tmp}
            colNum={2}
            title="单位基本信息"
            subTitle={`记录时间：${details.task && details.task.doneTime ? details.task.doneTime.slice(0, 16) : ''}`}
            footer="备注：记录表中符合要求打‘✓’，不符合要求的打‘✗’，且对故障进行现场描述，合同未委托项目以‘/’表述，此表格一式两份，维保单位与委托单位各执一份。"
          />
        }
        <MsgCeil task={details.task} last={details.last} />
        {
          <ColCeilC style={{ marginBottom: '50px' }}>
            <thead>
              <tr>
              <th>检查类型</th>
              <th>总数</th>
              <th>完好率</th>
              <th>检查类型</th>
              <th>总数</th>
              <th>完好率</th>
              </tr>
            </thead>
            <tbody>
              {
                Array.isArray(ans) && ans.map((it, index) => (
                  <tr key={index}>
                    {
                      Array.isArray(it) && it.map((u, ind) => (
                        <React.Fragment key={ind}>
                          {u && u.name && <td key={`th${ind}`}>{u.name}</td>}
                          <td key={`td${ind}`}>{u && u.total}</td>
                          <td key={`1td${ind}`}>{u && !isNaN(u.rate) && u.rate !== null && `${u.rate}%`}</td>
                        </React.Fragment>
                      ))
                    }
                  </tr>
                ))
              }
            </tbody>
            <Foot>
              <td colSpan={6}></td>
            </Foot>
          </ColCeilC>
        }
        <Ceil target={details.target} />
      </section>
    );
  }
}

@connect()
class Report extends React.Component<any> {
  componentRef: ComponentToPrint;

  render() {

    const { match } = this.props;

    return (
      <section style={{ position: 'relative' }}>
        <ReactToPrint
          trigger={() => <Button type="primary" style={{ float: 'right', top: '20px', right: '20px' }}>打印当前页面</Button>}
          content={() => this.componentRef}
        />
        <ComponentToPrint ref={el => (this.componentRef = el)} id={match.params.id} />
      </section>
    );
  }
}


export default Report;
